/**
 * Created with JetBrains PhpStorm.
 * User: BGate
 * Date: 26/10/2012
 * Time: 12:19
 * To change this template use File | Settings | File Templates.
 */





Crafty.c("Cell",{
    /** Khoi tao cell, cell hoặc trống hoặc chứa Road hoặc Point
     *  Cell sẽ đổi mầu nếu trống và MouseOver (khong can trong)
     *  Cell sẽ đổi màu Road element nếu MouseOver && isClick && !isPoint
     *      màu Road sẽ đổi theo màu Point bắt đầu
     *
     */
    myPos: new position(0,0),
    isRoad: false,
    isPoint: false,
    isConnected: false,
    road: undefined, //Path element
    P: 0, //Point element
    cC: 0, //Cell Color
    init: function(){
        this.requires("Color");
        this.color("#e0bd44");

        this.requires("Mouse")
            .bind("MouseOver",this._mouseover)
            //.bind("MouseOut",this._mouseout)
            //.bind("MouseDown",this._mouseDown)
            .bind("MouseUp",this._mouseUp);

    },
    _mouseDown: function(){
        if(this.isPoint || this.isRoad){
            if(this.isPoint){
                if(Path[this.cC].arr.length)
                {
                    Path[this.cC].clearAll();

                }
            }
            if(this.isRoad){
                Path[this.cC].clearFrom(this.myPos);
                //this.isRoad = true;
            }

            Path[this.cC].add(this.myPos);
            isClick = true;
            currentColor = this.cC;
        }

    },
    _mouseover: function(){

        if(!isClick && (this.isPoint || this.isRoad)){
            if(this.isPoint){
                if(Path[this.cC].arr.length)
                {
                    if(this.cC == currentColor){

                    }else{
                        Path[this.cC].clearAll();
                    }


                }
            }
            if(this.isRoad){
                Path[this.cC].clearFrom(this.myPos);
                //this.isRoad = true;
            }

            Path[this.cC].add(this.myPos);
            isClick = true;
            currentColor = this.cC;
        }

        //this.color("#ffe793");
        if(isClick){
            if(!this.isPoint){
                /**
                 * neu mouse over Point thi ko lam gi ca
                 */
                if(this.isRoad){
                    if(this.cC == currentColor){
                        Path[this.cC].clearFrom(this.myPos);
                    }else{
                        Path[this.cC].clearFromIn(this.myPos);
                    }
                    /**
                     * Neu mouseover 1 road
                     */
                }

                this.cC = currentColor;
                this.isRoad = true;
                Path[this.cC].add(this.myPos);
            }else{
                if((this.cC==currentColor)){
                    Path[this.cC].add(this.myPos);
                    if(Path[this.cC].arr.length>1)
                        isClick = false;
                    if(checkGameEnd()){
                        /*Crafty("Cell").each(function(){
                            this.unbind();
                            //this.unbind("MouseOut");
                        });*/
                        Crafty.e("DOM, 2D, Image,Mouse").image("ccc.png")
                            .attr({x: baseX + Math.floor( (cellSize*cellN - 274)/2 ),y: baseY + Math.floor((cellSize*cellN - 110)/2 )})
                            .bind("MouseDown",function(){
                                resetPath();
                                if(mapSelect <pointMaps.length() - 1 ){
                                    mapSelect++;
                                }else{

                                    if(cellN!=10){
                                        cellN+=2;
                                        mapSelect = 0;
                                        //pointMaps = pointMapSets[cellN];
                                    }
                                }

                                pointMap = pointMaps.getMap(mapSelect);
                                Crafty.scene("Play");
                            });
                        clearInterval(timing);
                        if(played[cellN][mapSelect]==0 || played[cellN][mapSelect] > TimeCount){
                            played[cellN][mapSelect] = TimeCount;
                            savePlayed();
                        }
                    }
                }
            }

        }
    },
    _mouseout: function(){
        if(this.isRoad)
            this.color(roadColorSet[this.cC]);
        else{
            this.color("#e0bd44");
        }

    },

    _mouseUp: function(){
        isClick = false;
        currentColor = 0;
        if(this.isPoint && (Path[this.cC].arr.length == 1)){
            Path[this.cC].clearAll();
        }
    },


    cell: function(myPos){

        this.myPos = myPos;
        if(pointMap[tran(this.myPos)]){
            this.P = Crafty.e("DOM,2D,Color,Point")
                .point(this.myPos);
            this.isPoint = true;
            this.bind("MouseDown",function(){


                        if(Path[this.cC].arr.length)
                        {
                            Path[this.cC].clearAll();

                        }


                    Path[this.cC].add(this.myPos);
                    isClick = true;
                    currentColor = this.cC;

            });
            this.cC = pointMap[tran(this.myPos)];

        }
        //this.areaMap([this.x,this.y], [this.x+cellSize,this.y], [this.x+cellSize,this.y+cellSize], [this.x,this.y+cellSize]);
        return this;
    }
});


Crafty.c("Point",{
    /**
     *  Tạo điểm đầu và điểm cuối
     *  Mỗi màu có một cặp điểm đầu và cuối
     *  Khi MouseDown trên point: isClick*=-1 gán currentColor=Point.Color hoặc hủy nếu !isClick
     *
     *  Point and It's Road được quản lý bởi bảng Path[]
     *  Nếu một Point đã có path && Click -> tất cả Road của nó bị hủy
     */
    myPos: new position(0,0),
    pC: 0, //point Color
    init: function(){
        this.requires("Color")
            .attr({w: cellSize - Math.floor(cellSize*3/8),h: cellSize - Math.floor(cellSize*3/8)});
        this.css("border-radius",Math.round(cellSize*5/16)+"px");
    },
    point: function(myPos){
        this.attr({x: i*cellSize+Math.round(cellSize*3/16) + baseX,y: j*cellSize+Math.round(cellSize*3/16) + baseY });
        this.myPos = myPos;
        if(pointMap[tran(this.myPos)]) {
            this.color(colorSet[pointMap[tran(this.myPos)]]);
            this.pC = pointMap[tran(this.myPos)];
            //Path[this.pC].push({i: i, j: j});
        }
        return this;
    },
    pointColor: function(i){

    }

});
/**
 * Road la mot div noi 2 Cell
 * dau vao la 2 position
 * quan ly boi flow( tao va xoa)
 */


Crafty.c("Road", {
    rC: 0, //Road Color
    // myPos: new position(0,0),
    /**
     * Khởi tạo Road
     * Road là một element của Cell, truy cập lại cell qua mảng map[]
     * Khởi tạo khi mouseOver  && isClick
     * Màu Road.Color = currentColor
     *
     */
    init: function(){
        this.requires("Color")
            .css("border-radius",(Math.round(cellSize*3/16))+"px");
    },
    road: function(pos1,pos2,co){
        //this.myPos = myPos;
        this.rC = co;

        this.color(colorSet[this.rC]);

        temp_x = pos1.x - pos2.x;
        temp_y = pos1.y - pos2.y;

        if((temp_x*temp_y)==0){
            if(temp_x){
                if(temp_x==-1){
                    this.attr({x: baseX +  pos1.x*cellSize + Math.round(cellSize*5/16), y: baseY + pos1.y*cellSize + Math.round(cellSize*5/16), w: Math.floor(cellSize*11/8), h: Math.floor(cellSize*3/8)});
                }else if(temp_x==1){
                    this.attr({x: baseX + pos2.x*cellSize + Math.round(cellSize*5/16), y: baseY + pos2.y*cellSize + Math.round(cellSize*5/16), w: Math.floor(cellSize*11/8), h: Math.floor(cellSize*3/8)});
                }else{
                    return null;
                }
            }else{
                if(temp_y==-1){
                    this.attr({x: baseX + pos1.x*cellSize + Math.round(cellSize*5/16), y: baseY + pos1.y*cellSize + Math.round(cellSize*5/16), w: Math.floor(cellSize*3/8), h: Math.floor(cellSize*11/8) });
                }else if(temp_y==1){
                    this.attr({x: baseX + pos2.x*cellSize + Math.round(cellSize*5/16), y: baseY + pos2.y*cellSize + Math.round(cellSize*5/16), w: Math.floor(cellSize*3/8), h: Math.floor(cellSize*11/8) });
                }else{
                    return null;
                }
            }
        }else{
            return null;
        }

        return this;


        //Path[this.rC].push({i: this.row,j: this.col});
    },
    des : function(){

        this.destroy();
    }
});

Crafty.c("MyButton",{
    text: undefined,
    n: 8,
    init: function (){
        this.requires("Color")
            .color("SandyBrown");
        this.requires("CSS");
        this.requires("Mouse")
            .bind("MouseOver",this._mouserOver)
            .bind("MouseOut",this._mouseOut)
            .bind("MouseDown",this.mouseDown);
    },
    mouseDown: function(){
        cellN = this.n;
        //pointMaps.length=0;
        gamePageSelect = 0;
        if(this.n!=0){
            //pointMaps = pointMapSets[this.n];
            //mapSelect = 0;
            //pointMap = pointMaps[mapSelect];
            Crafty.scene("GameSelect");
        }
    },
    _mouserOver: function(){
        this.color("aqua");
        //this.css("background-image","-webkit-radial-gradient(center, ellipse farthest-side, #DA91FF 0%, #4163EF 100%)");
    },
    _mouseOut: function(){
        this.color("SandyBrown");
    },

    button: function(text,thutu,n){
        this.n = n;
        this.text = text;
        this.attr({x: Math.floor((flowW*1/4)), y: Math.floor(flowH*(thutu+1)/8),w: Math.floor(flowW/2), h: Math.floor(flowH/9) })
            .css("border-radius",(Math.floor(this.h/3))+"px");
        //.css("background-image","-webkit-radial-gradient(right center, ellipse farthest-side, #FFF56E 0%, #EFAC26 100%)");
        Crafty.e("DOM,2D, Text,aaa").text(text)
            .attr({x: this.x + Math.floor(this.w/5), y: this.y + Math.floor((this.h-20)/2),
                w: Math.floor(this.w*4/5),h: this.h});
        return this;
    }
});

Crafty.c("InGameBut",{
    type: 0,
    init: function(){
        /*this.requires("Color")
         .css("border-radius",Math.floor(20)+"px")
         .color("Green");*/
        this.requires("Mouse")
            //.bind("MouseOver",this._mouserOver)
            //.bind("MouseOut",this._mouseOut)
            .bind("Click",this.click);
        this.requires("Image");

    },
    text: undefined,
    inGameBut : function(text,type){
        this.text = text;
        this.type = type;
        if(isWitdhMode){
            this.attr({
                w: 80,
                h: 80,
                x: cellN*cellSize + baseX,
                y: type*80 + baseY
            });

        }else{
            this.attr({
                w: 80,
                h: 80,
                x: type*80 + baseX,
                y: cellN*cellSize + baseY

            });
        }
        switch(this.type){
            case BACK:
                this.image("images/back.png");
                break;
            case NEXT:
                this.image("images/next1.png");
                break;
            case PRE:
                this.image("images/previous1.png");
                break;
            case RESET:
                this.image("images/refresh1.png");
                break;
        }

    },
    click: function(){
        switch(this.type){
            case NEXT:
                resetPath();
                if(mapSelect <pointMaps.length()-1 ){
                    mapSelect++;
                }else{

                    if(cellN!=10){
                        cellN+=2;
                        mapSelect = 0;
                        //pointMaps = pointMapSets[cellN];
                    }
                }
                pointMap = pointMaps.getMap(mapSelect);

                Crafty.scene("Play");
                break;
            case RESET:
                resetPath();
                Crafty.scene("Play");
                break;
            case BACK:
                mapSelect = 0;
                Crafty.scene("GameSelect");
                break;
            case PRE:
                resetPath();
                if(mapSelect != 0){
                    mapSelect--;
                }else{
                    if(cellN!=6){
                        cellN-=2;
                        mapSelect = pointMaps.length() - 1;
                        //pointMaps = pointMapSets[cellN];
                    }

                    pointMap = pointMaps.getMap(mapSelect);
                }

                pointMap = pointMaps.getMap(mapSelect);

                Crafty.scene("Play");
                break;
        }
    },
    _mouserOver: function(){
        this.color("SandyBrown");
        //this.css("background-image","-webkit-radial-gradient(center, ellipse farthest-side, #DA91FF 0%, #4163EF 100%)");
    },
    _mouseOut: function(){
        this.color("Green");
    }
});

Crafty.c("gameTiles",{
    _mapselect: 0 ,
    init: function(){
        this.requires("Color")
            .color("#e0bd44");
        this.requires("Mouse")
            .bind("Click",this._click);
    },
    tiles: function(posi,mapSelect){
        var tempr = Math.floor(posi/6);
        var tempc = posi - 6*tempr;
        this.attr({w: 40, h: 40, x: 60+tempc*64, y: 80 + tempr*64});
        this._mapselect = mapSelect;
        if(played[cellN][mapSelect]==0){
            Crafty.e("DOM, 2D, Text, Color").text("-")
                .attr({x: this.x+15, y: this.y+15});
        }else{
            Crafty.e("DOM, 2D, Text").text(played[cellN][mapSelect])
                .attr({x: this.x+12, y: this.y+10});
        }
    },
    _click: function(){
        mapSelect = this._mapselect;
        pointMap = pointMaps.getMap(mapSelect);
        Crafty.scene("Play");
    }
});

Crafty.c("TouchListener",{
    _DownX: 0,
    _DownY: 0,
    _UpX: 0,
    _UpY: 0,
    _offset: 30,
    _isclick: false,
    init: function(){
        this.requires("Mouse")
            .bind("MouseDown",this.mouseDown)
            .bind("MouseUp",this.mouseUp);
    },
    touchListener: function(x,y,w,h,onRightTouch, onLeftTouch,offset){
        this.attr({x: x,y: y, w: w, h: h,visible: false });
        this._onLeftTouch = onLeftTouch;
        this._onRightTouch = onRightTouch;
        this._offset = offset;
    },
    onRightTouch: function(){

    },
    onLeftTouch: function(){

    },
    mouseDown: function(ev){
        this._isclick = true;
        this._DownX = ev.offsetX;
        this._DownY = ev.offsetY;
    },
    mouseUp: function(ev){
        if(this._isclick){
            this._UpX = ev.offsetX;
            this._UpY = ev.offsetY;

            var temp = this._UpX - this._DownX;
            if(temp>this._offset){
                this._onRightTouch();

            }else if(temp<(-1*this._offset)){
                this._onLeftTouch();
            }
        }
    }
})